import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Row, Radio, Switch, Select, InputNumber, message, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import {
  fetchTradeSetting,
  goodsCatList,
} from '@/services/setting/trade'

const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))
const urlPage = ['首页', '分类页', '购物车', '我的页面', '我的订单页面']
const { Option } = Select

const Setting = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState({})
  const [options, setOptions] = useState([])
  const [urlId, setUrlId] = useState(null)

  useEffect(() => {
    init()
    goodsList()
  }, [])

  const init = async params => {
    const res = await fetchTradeSetting(params)
    res.code == 0 ? setData(res.data) : message.warning(res.msg)
  }

  const goodsList = async (params = { supplierId: "1072" }) => {
    const res = await goodsCatList(params)
    res.code == 0 && setOptions(res.data)
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    
  }
  const formItemLayout = {
    labelCol: { span: 13 },
    wrapperCol: { span: 11 },
  };
  return (
    <PageHeaderWrapper>
      {/* <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} /> */}
      <RenderButtom click={handleBtn} />
      <Form {...formItemLayout} >
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="拍下">
              {getFieldDecorator('buyTime', {
                initialValue: data && data.buyTime,
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<InputNumber />)}
            </Form.Item>
          </Col>
          <Col style={{marginLeft: 10, marginTop: 10}}>
              分钟内未付款， 自动取消订单
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="发货">
              {getFieldDecorator('deliveryTime', {
                initialValue: data && data.deliveryTime,
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<InputNumber />)}
            </Form.Item>
          </Col>
          <Col style={{marginLeft: 10, marginTop: 10}}>
              天后自动完成订单
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="确认收货">
              {getFieldDecorator('receiveTime', {
                initialValue: data && data.receiveTime,
                rules: [
                  {
                    required: true,
                  }
                ],
              })(<InputNumber />)}
            </Form.Item>
          </Col>
          <Col style={{marginLeft: 10, marginTop: 10}}>
            天后自动返佣
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="库存扣减">
              {getFieldDecorator('lessInventoryType', {
                initialValue: data && data.lessInventoryType,
              })(
                <Radio.Group>
                  <Radio value={'1'}>下单减库存</Radio>
                  <Radio value={'2'}>支付减库存</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="提货方式">
              {getFieldDecorator('defaultDeliveryMethod', {
                initialValue: data && data.defaultDeliveryMethod,
              })(
                <Radio.Group>
                  <Radio value={'0'}>到店自提</Radio>
                  <Radio value={'1'}>送货上门</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="全员分销买单即会员">
              {getFieldDecorator('isCashierMembers', {
                initialValue: data.isCashierMembers == 1 ? true : false,
                valuePropName: 'checked',
                rules: [
                ],
              })(<Switch 
                  checkedChildren="开启" unCheckedChildren="关闭"
                />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="POS收款买单即会员">
              {getFieldDecorator('isPosStaticCode', {
                initialValue: data.isPosStaticCode == 1 ? true: false,
                valuePropName: 'checked',
                rules: [
                ],
              })(<Switch 
                  checkedChildren="开启" unCheckedChildren="关闭"
                />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="本机生成收款码">
              {getFieldDecorator('isGeneratorCode', {
                initialValue: data.isGeneratorCode == 1 ? true : false,
                valuePropName: 'checked',
                rules: [
                ],
              })(<Switch 
                  checkedChildren="开启" unCheckedChildren="关闭"
                />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="付款成功跳转页面">
              {getFieldDecorator('paymentSuccessType', {
                initialValue: data && data.paymentSuccessType,
                rules: [
                  {
                    required: true,
                  }
                ],
              })(
                <Radio.Group onChange={e => setUrlId(e.target.value)}>
                  {
                    urlPage.map((v, i) => <Radio key={i} value={(i + 1).toString()}>{v}</Radio>)
                  }
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col style={{marginLeft: 10, marginTop: 5}}>
            一级分类名称：<Select style={{width: 200}} disabled={urlId != 2}>
              {options.map(o => 
                <Option value={o.id}>{o.catName}</Option>
              )}
            </Select>
          </Col>
        </Row>
      </Form>
    </PageHeaderWrapper>
    )
}

export default Form.create()(Setting)
